<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="main">
			<view class="xbgf">

				<u-navbar title="" bgColor="#ffffff00" :fixed="false" :autoBack="false">
					<template v-slot:left>
						<view class="toptitle">订单中心</view>
					</template>
				</u-navbar>

				<view class="search xflex-x">
					<image class="searchIcon" src="/static/image/index/sousuo.png" mode=""></image>
					<input class="searchtips xflex1" type="text" v-model="keyword" placeholder="输入用户姓名/订单号（支持后4位）" @blur="sousu()" />
				</view>

				<view class="tab">
					<u-tabs :list="order.list" :current="current" :scrollable="false" @click="click"></u-tabs>
				</view>
			</view>


			<view class="xp20-25 xbs">
				<view class="" v-for="(item,index) in dataList" :key="index">
					<view class="order" v-if="current == 0 || current == 1">
						<view class="order-top xbs xflex-x-between" :class="current == 0?'bg1':'bg2'">
							<view class="order-top-left">
								{{item.category == 'calendar'? '日历房':'当日特价房'}}
							</view>
							<view class="xflex-x">
								<view class="order-top-sn">
									订单：{{item.sn.substring(0,4)}}...{{item.sn.substring(15)}}
								</view>
								<view class="order-top-copy" @click="copy(item.sn)">
									复制
								</view>
							</view>
						</view>


						<view class="order-boxs">
							<view class="order-info xflex-x xmb24" @click="topage(item)" v-for="(items,index) in item.items"
								:key="index">
								<image class="order-info-img" :src="items.image" mode=""></image>
								<view class="order-info-box xflex-y-between xai">
									<view class="">
										<view class="order-info-title xmb12">
											{{items.house_name}}
										</view>
										<view class="xflex-x">
											<view class="order-info-span xmr10" v-for="(itm,indx) in items.labels"
												:key="indx">
												{{itm}}
											</view>
										</view>
									</view>
									<view class="order-info-price" style="width: 100%;">
										<text>￥</text>{{items.price}}
									</view>
								</view>
							</view>

							<view class="order-tag xflex-x xmt32 xbb8D xpb32">
								<image class="order-tag-icon" src="/pagesA/static/images/rili.png" mode=""></image>
								<view class="order-tag-tags">
									{{item.order_info.time}}
								</view>
								<view class="order-tag-tags">
									{{item.order_info.night}}晚
								</view>
							</view>


							<view class="order-user xmt32">
								<view class="xflex-x">
									<view class="order-user-vip xflex-x-between">
										<image class="order-user-vipIcon" :src="item.user.level.icon" mode=""></image>
										<view class="order-user-vipText">
											{{ item.user.level.name }}
										</view>
									</view>
								</view>

								<view class="xflex-x-between">
									<view class="">
										<view class="order-user-in">
											姓名：<text>{{ item.realname }}</text>
										</view>
										<view class="order-user-in">
											联系方式：<text>{{item.hide_mobile}}</text>
										</view>
									</view>
									<view class="xflex-y-center" @click="onPhone(item.hide_mobile)">
										<image class="order-user-customer" src="/pagesA/static/images/dianhua.png"
											mode=""></image>
										<view class="order-user-customert">
											联系客户
										</view>
									</view>
								</view>
							</view>

							<view class="xmt32 xflex-x-between">
								<view class="">
									<view class="xfz28 xfw500 xc9" v-if="current == 0">
										客人预估：
									</view>
									<view class="order-bom-time" v-if="current == 0">
										{{item.expect_time.split(' ')[1]}} 到店
									</view>
								</view>
								<view class="xflex-x">
									<!-- <view class="order-bom-btn1" @click="qx(item)" v-if="current == 0">
										取消订单
									</view> -->
									<view class="order-bom-btn2" @click="oncheck(item)" v-if="current == 0">
										确认入住
									</view>

									<view class="order-bom-btn1" v-if="current == 1">
										已入住
									</view>
								</view>
							</view>
						</view>
					</view>



					<view class="order" v-if="current == 2">
						<view class="order-top xbs xflex-x-between" :class="current == 0?'bg1':'bg2'">
							<view class="order-top-left">
								{{item.category == 'calendar'? '日历房':'当日特价房'}}
							</view>
							<view class="xflex-x">
								<view class="order-top-sn">
									订单：{{item.sn.substring(0,4)}}...{{item.sn.substring(15)}}
								</view>
								<view class="order-top-copy">
									已取消
								</view>
							</view>
						</view>


						<view class="orders-boxs">

							<view class="orders-item xflex-x-between">
								<view class="xflex-x">
									<image class="orders-item-icon" src="/pagesA/static/images/chuang.png" mode="">
									</image>
									<view class="xflex-x">
										<view class="orders-item-span">
											{{item.item.house_name}}
										</view>

										<view class="orders-item-span">
											1间
										</view>
									</view>
								</view>
								<view class="orders-item-sun">
									<!-- 库存共 <text>2</text>间 -->
								</view>
							</view>

							<view class="orders-item xflex-x-between">
								<view class="xflex-x">
									<image class="orders-item-icon1" src="/pagesA/static/images/rili.png" mode="">
									</image>
									<view class="xflex-x">
										<view class="orders-item-span1">
											{{item.order.order_info.time}}
										</view>

										<view class="orders-item-span">
											{{item.order.order_info.night}}间
										</view>
									</view>
								</view>

							</view>


							<view class="orders-item xflex-x-between">
								<view class="xflex-x">
									<image class="orders-item-icon2" src="/pagesA/static/images/qian.png" mode="">
									</image>
									<view class="xflex-x">
										<view class="orders-item-pricetxt">
											客人出价
										</view>
										<view class="xflex-x">
											<view class="orders-item-fang">
												{{item.item.house_name}}
											</view>
											<view class="orders-item-fang">
												￥{{item.order.price}}/间
											</view>
										</view>
									</view>
								</view>

							</view>
							
							<view class="total">
								<view class="xflex-x-between">
									<view class="xflex-x total-sun">
										合计: <view class="total-num xml12"><text class="xfz26">￥</text>{{item.order.order_amount}}</view>
									</view>
									<view class="total-gd xflex-x" @click="topage(item)">
										<view class="">
											取消原因
										</view>
										<image class="total-gdimg" src="/pagesA/static/images/jt.png" mode=""></image>
									</view>
								</view>
								
							</view>




						</view>
					</view>
				
					
					
					<view class="order" v-if="current ==3">
						<view class="order-top xbs xflex-x-between" :class="current == 0?'bg1':'bg2'">
							<view class="order-top-left">
								{{item.category == 'calendar'? '日历房':'当日特价房'}}
							</view>
							<view class="xflex-x">
								<view class="order-top-sn">
									订单：{{item.sn.substring(0,4)}}...{{item.sn.substring(15)}}
								</view>
								<view class="order-top-copy" @click="copy(item.sn)">
									复制
								</view>
							</view>
						</view>
					
					
						<view class="order-boxs">
							<view class="order-info xflex-x" @click="topage(item)" 
								:key="index">
								<image class="order-info-img" :src="item.item.image" mode=""></image>
								<view class="order-info-box xflex-y-between " style="justify-content: normal;">
									<view class="">
										<view class="order-info-title xmb12">
											{{item.item.house_name}}
										</view>
										<view class="xflex-x">
											<view class="order-info-span xmr10" v-for="(itm,indx) in item.item.labels"
												:key="indx">
												{{itm}}
											</view> 
										</view>
									</view>
									<view class="order-info-price xmt32" style="width: 100%;">
										<text>￥</text>{{item.item.price}}
									</view>
								</view>
							</view>
					
							<view class="order-tag xflex-x xmt32 xbb8D xpb32">
								<image class="order-tag-icon" src="/pagesA/static/images/rili.png" mode=""></image>
								<view class="order-tag-tags">
									{{item.order.order_info.time}}
								</view>
								<view class="order-tag-tags">
									{{item.order.order_info.night}}晚
								</view>
							</view>
					
					
							<view class="order-user xmt32" style="width: 100%;">
								<view class="order-user-tit">
									申请退款原因：
								</view>
								{{item.reason}}
								
							</view>
							
							<view class="xflex-x" style="justify-content: flex-end; margin-top: 30rpx;">
								
								<!-- <view class="order-bom-btn1" @click="getorderrefund(item.id,2)">
									拒绝退款
								</view> -->
								
								<view class="order-bom-btn1" style="margin: 0;" @click="getorderrefund(item.id,1)">
									确认退款
								</view>
							</view>

						</view>
					</view>
					
				
				
				
				
				</view>
			</view>


			<u-popup :show="orderinfo.show" mode="center" round="12" zIndex="10100">
				<view class="ptips pr">
					<image class="gb pa" @click="orderinfo.show = false" src="/pagesA/static/images/guanb.png" mode="">
					</image>
					<view class="ptips-title">
						请输入核销码
					</view>
					<view class="ptips-box">
						<view class="ptips-input">
							<input class="" v-model="orderinfo.value" placeholder="请输入核销码" type="text" />
						</view>
					</view>


					<view class="xflex-x-around">
						<view class="ptips-btn1" @click="orderinfo.show = false">
							取消核销
						</view>
						<view class="ptips-btn2" @click="Verification()">
							核销
						</view>
					</view>
				</view>
			</u-popup>

			<tabbars :list="tabs.list" :value="0" />
		</view>
	</z-paging>
</template>

<script setup>
	import {
		reactive,
		ref,
	} from 'vue';
	
	import {onShow} from '@dcloudio/uni-app'
	import {
		orderlists,
		verify,
		ordercancel,
		orderrefund,
		partnerinfo
	} from '../../../network/home.js'
	import tabbars from "/components/tabbar/tabbar.vue"
	
	onShow(()=>{
		paging.value.reload()
	})
	
	const getorderrefund = (id,type) =>{
		orderrefund({
			id:id,
			status:type
		}).then(res=>{
			console.log(res);
			uni.showToast({
				icon:"none",
				title:'操作成功'
			})
			paging.value.reload()
			partnerinfo().then(res => {
				console.log(res,"=slk");
			
				
				tabs.list[0].badge = res.data.default.wait_checkin
				tabs.list[1].badge = res.data.default.wait_rob
				
			})
		})
	}
	
		
	const sousu = () =>{
		paging.value.reload()
	}
	
const copy = (data) =>{
		uni.setClipboardData({
			data:data,
			success() {
				uni.showToast({
					icon:"none",
					title:'复制成功'
				})
			}
		})
	}
	const topage = (item) => {

		if (current.value == 0) {
			uni.navigateTo({
				url: '/pagesA/page/check/check?id=' + item.id
			})

		} else if (current.value == 1) {
			uni.navigateTo({
				url: '/pagesA/page/checked/check?id=' + item.id
			})
		}else if(current.value == 2){
			uni.navigateTo({
				url: '/pagesA/page/cancel/cancel?id=' + item.id
			})
		}else{
			uni.navigateTo({
				url: '/pagesA/page/joined/joined?id=' + item.id
			})
		}

	}
	partnerinfo().then(res => {
		console.log(res,"=slk");
	
		
		tabs.list[0].badge = res.data.default.wait_checkin
		tabs.list[1].badge = res.data.default.wait_rob
		
	})

	let tabs = reactive({
		list: [{
				type: 'solt',
				selected: '/pagesA/static/images/tab/2.png',
				unselected: '/pagesA/static/images/tab/1.png',
				text: '订单',
				path: '/pagesA/page/home/home',
				badge:0
			},
			{
				type: 'zhong',
				selected: '/pagesA/static/images/tab/4.pngg',
				unselected: '/pagesA/static/images/tab/3.png',
				path: '/pagesA/page/lobby/lobby',
				badge:0
			},
			{
				type: 'solt',
				selected: '/pagesA/static/images/tab/6.png',
				unselected: '/pagesA/static/images/tab/5.png',
				text: '我的',
				path: '/pagesA/page/mine/mine',
				badge:0
			}
		]
	})

	let orderinfo = reactive({
		show: false,
		id: '',
		value: ''

	})

	const oncheck = (e) => {
		console.log(e);
		orderinfo.id = e.id
		orderinfo.show = true
		
	}

	const Verification = () => {
		verify({
			id: orderinfo.id,
			code: orderinfo.value
		}).then(res => {
			orderinfo.show = false
			paging.value.reload()
			partnerinfo().then(res => {
				console.log(res,"=slk");
			
				
				tabs.list[0].badge = res.data.default.wait_checkin
				tabs.list[1].badge = res.data.default.wait_rob
				
			})
			uni.showToast({
				icon:"none",
				title:"核销成功"
			})
		})
	}
	
	const onPhone = (phone) => {
		uni.makePhoneCall({
			phoneNumber:phone
		})
	}

	const qx = (data) => {
		ordercancel({
			id: data.id
		}).then(res => {
			uni.showToast({
				icon: "none",
				title: "取消成功"
			})
			
			partnerinfo().then(res => {
				console.log(res,"=slk");
			
				
				tabs.list[0].badge = res.data.default.wait_checkin
				tabs.list[1].badge = res.data.default.wait_rob
				
			})
			
			setTimeout(()=>{
				current.value = 1
			},1000)
			paging.value.reload()
		})
	}


	let current = ref(0)

	let order = reactive({
		list: [{
				name: '待入住',
			},
			{
				name: '已入住',

			},
			{
				name: '已取消'
			},
			{
				name: '退款/售后'
			}
		]
	})

	let keyword = ref('')

	const click = (e) => {
		current.value = e.index
		paging.value.reload()
	}

	const paging = ref(null)
	const dataList = ref([])
	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		orderlists({
			page_no: pageNo,
			page_size: pageSize,
			keyword: keyword.value,
			status: current.value

		}).then(res => {

			paging.value.complete(res.data.lists);
			console.log(dataList);
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	// .main {
	// 	// background: linear-gradient(#fff 0%, #fff 221rpx, #f5f5f5 20px);
	// 	padding: 25rpx 30rpx;
	// 	box-sizing: border-box;
	// }

	.toptitle {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #222222;
	}

	.searchIcon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}

	.searchtips {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
	}

	.search {
		width: 690rpx;
		height: 68rpx;
		background: #F5F5F5;
		border-radius: 34rpx;
		border: 1px solid #EEEEEE;
		margin: auto;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
	}

	.tab {
		background-color: #fff;
	}

	.order {
		background-color: #fff;

		.bg1 {
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
		}

		.bg2 {
			background-color: #B5B5B5;
		}

		&-top {
			width: 100%;
			padding: 28rpx 36rpx;

			border-radius: 20rpx 20rpx 0rpx 0rpx;

			&-left {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #F5F5F5;
			}

			&-sn {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #F5F5F5;
			}

			&-copy {
				width: 80rpx;
				height: 36rpx;
				background: #F5F5F530;
				border-radius: 6rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F5F5F5;
				line-height: 36rpx;
				margin-left: 22rpx;
			}
		}

		&-boxs {
			padding: 24rpx 21rpx;
			box-sizing: border-box;
		}

		&-info {

			&-img {
				width: 177.6rpx;
				height: 177.6rpx;
				background-color: #0DBFFB;
				border-radius: 12rpx;
				margin-right: 22rpx;
			}

			&-box {
				height: 177.6rpx;
			}

			&-title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			&-span {
				// width: 100rpx;
				height: 32rpx;
				background: #EEEEEE;
				border-radius: 6rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 18rpx;
				color: #999999;
				line-height: 32rpx;
				text-align: center;
				padding: 0 10rpx;
			}

			&-price {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #ED2445;

				&>text {
					font-size: 26rpx;
				}
			}
		}

		&-tag {

			&-icon {
				width: 40rpx;
				height: 40rpx;
			}

			&-tags {
				min-width: 72rpx;
				height: 36rpx;
				background: #F5F5F5;
				border-radius: 3rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: center;
				padding: 5rpx 17rpx;
				margin-left: 20rpx;
			}
		}

		&-user {
			width: 640rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background: #F8F8F8;
			border-radius: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			&tit {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 13rpx;
			}
			
			

			&-vip {
				// width: 150rpx;
				// height: 40rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(204, 204, 204, 0.57);
				border-radius: 20rpx;
				padding: 2rpx 2rpx 2rpx 17rpx;
			}

			&-vipText {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #D2A528;
				padding-right: 10rpx;
				// line-height: 46rpx;
			}

			&-vipIcon {
				width: 36rpx;
				height: 36rpx;
			}

			&-customer {
				width: 60rpx;
				height: 60rpx;
			}

			&-customert {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #0CB0FD;
				margin-top: 11rpx;
			}

			&-in {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				margin-top: 28rpx;

				&>text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		&-bom {
			&-time {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #0CB0FD;
				margin-top: 28rpx;
			}

			&-btn1 {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 88rpx;
				text-align: center;
				width: 200rpx;
				height: 88rpx;
				border-radius: 44rpx;
				border: 1px solid #CCCCCC;
				margin-right: 20px;
			}

			&-btn2 {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #fff;
				line-height: 88rpx;
				text-align: center;
				width: 200rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #0DBFFB, #198EFF);
				border-radius: 44rpx;
			}
		}


	}

	.ptips {
		width: 600rpx;
		height: 370rpx;
		background: #FFFFFF;
		border-radius: 30rpx;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
			margin-top: 40rpx;
		}

		&-box {
			padding: 54rpx;
			box-sizing: border-box;
		}

		.gb {
			width: 40rpx;
			height: 40rpx;
			right: 30rpx;
			top: 30rpx;
		}

		&-input {

			width: 420rpx;
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: auto;
			padding: 31rpx 40rpx;
			box-sizing: border-box;
		}

		&-btn1 {
			width: 214rpx;
			height: 72rpx;
			border-radius: 36rpx;
			border: 1px solid #999999;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			text-align: center;
			line-height: 72rpx;
		}

		&-btn2 {
			width: 214rpx;
			height: 72rpx;
			border-radius: 36rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 72rpx;
		}
	}

	.hotel {

		&-h {}

		&-title {}
	}
	.total {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
		padding: 37rpx 38rpx;
		box-sizing: border-box;
		&-num {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #ED2445;
			
			
		}
		&-gd {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			
		}
		&-gdimg {
			width: 11rpx;
			height: 20rpx;
			margin-left: 8rpx;
		}
	}
	
	.orders{
		padding: 24rpx 25rpx 21rpx;
		&-sn {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
		}
		&-item {
			padding: 30rpx 36rpx;
			border-bottom: 1rpx solid #EEEEEE;
			
			&-icon {
				width: 42rpx;
				height: 33rpx;
			}
			&-icon1 {
				width: 39rpx;
				height: 33rpx;
			}
			&-icon2 {
				width: 32rpx;
				height: 33rpx;
			}
			
			&-span {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				width: 106rpx;
				height: 36rpx;
				background: #F5F5F5;
				border-radius: 3rpx;
				line-height: 36rpx;
				text-align: center;
				margin-left: 20rpx;
			}
			
			&-span1 {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				width: 306rpx;
				height: 36rpx;
				background: #F5F5F5;
				border-radius: 3rpx;
				line-height: 36rpx;
				text-align: center;
				margin-left: 20rpx;
			}
			
			&-sun {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #198FFF;
				line-height: 48rpx;
				&>text {
					margin: 0 14rpx 0 11rpx;
				}
			}
			
			&-pricetxt {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-left: 24rpx;
			}
				
			&-fang {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #198FFF;
				padding: 5rpx 20rpx;
				background: rgba(25,143,255,0.05);
				border-radius: 3rpx;
				margin-left: 10rpx;
			}
		}
	}
	
	.orders {
		border-radius: 20rpx;
		padding: 30rpx 20rpx;

		&-sn {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #7C7C7C;
			margin-right: 56rpx;
		}

		&-info {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #272727;
		}

		&-copy {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 22rpx;
			color: #333333;

			width: 70rpx;
			height: 36rpx;
			background: #F2F2F2;
			border-radius: 18rpx;

			margin-left: 12rpx;
			text-align: center;
			line-height: 36rpx;
		}

		&-tex {
			margin-bottom: 44rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&-total {
			justify-content: flex-end;
		}

		&-Num {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #272727;
		}

		&-price {
			font-size: 36rpx;

			&>text {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #F0250F;
			}
		}
	}
</style>